<template>
	<div class="app-container">
		<el-card class="box-card">
			<template #header>
				<div class="card-header">
					<span>{{ isEdit ? "编辑活动" : "添加活动" }}</span>
				</div>
			</template>

			<el-form
				ref="formRef"
				:model="form"
				:rules="rules"
				label-width="100px"
				class="demo-form"
			>
				<el-form-item label="活动名称" prop="title">
					<el-input v-model="form.title" placeholder="请输入活动名称" />
				</el-form-item>
				<el-form-item label="活动时间" prop="time">
					<el-date-picker
						v-model="form.time"
						type="daterange"
						range-separator="至"
						start-placeholder="开始时间"
						end-placeholder="结束时间"
						value-format="YYYY-MM-DD"
					/>
				</el-form-item>
				<el-form-item label="活动地点" prop="location">
					<el-input v-model="form.location" placeholder="请输入活动地点" />
				</el-form-item>
				<el-form-item label="最大人数" prop="maxParticipants">
					<el-input-number
						v-model="form.maxParticipants"
						:min="1"
						:max="1000"
					/>
				</el-form-item>
				<el-form-item label="活动描述" prop="description">
					<el-input
						v-model="form.description"
						type="textarea"
						:rows="4"
						placeholder="请输入活动描述"
					/>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleSubmit">确 定</el-button>
					<el-button @click="handleCancel">取 消</el-button>
				</el-form-item>
			</el-form>
		</el-card>
	</div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { dayjs, ElMessage } from "element-plus";
import { getEvent, createEvent, updateEvent } from "@/api/event";

const route = useRoute();
const router = useRouter();
const formRef = ref(null);

// 是否是编辑模式
const isEdit = computed(() => route.params.id !== undefined);

// 表单数据
const form = reactive({
	id: undefined,
	title: "",
	time: [],
	location: "",
	maxParticipants: 50,
	description: "",
});

// 表单验证规则
const rules = {
	title: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
	time: [{ required: true, message: "请选择活动时间", trigger: "change" }],
	location: [{ required: true, message: "请输入活动地点", trigger: "blur" }],
	maxParticipants: [
		{ required: true, message: "请输入最大参与人数", trigger: "blur" },
	],
	description: [{ required: true, message: "请输入活动描述", trigger: "blur" }],
};

// 获取活动详情
const getDetail = async (id) => {
	try {
		const res = await getEvent(id);
		Object.assign(form, {
			id: res.id,
			title: res.title,
			time: [res.startTime, res.endTime],
			location: res.location,
			maxParticipants: res.maxParticipants,
			description: res.description,
		});
	} catch (error) {
		console.error("获取活动详情失败:", error);
	}
};

// 表单提交
const handleSubmit = async () => {
	if (!formRef.value) return;
	await formRef.value.validate(async (valid) => {
		if (valid) {
			try {
				const data = {
					title: form.title,
					startTime: dayjs(form.time[0]).format("YYYY-MM-DD"),
					endTime: dayjs(form.time[1]).format("YYYY-MM-DD"),
					location: form.location,
					maxParticipants: form.maxParticipants,
					description: form.description,
				};
				if (isEdit.value) {
					await updateEvent(form.id, data);
					ElMessage.success("更新成功");
				} else {
					await createEvent(data);
					ElMessage.success("创建成功");
				}
				router.push("/event/list");
			} catch (error) {
				console.error("保存活动失败:", error);
			}
		}
	});
};

// 取消按钮
const handleCancel = () => {
	router.push("/event/list");
};

onMounted(() => {
	if (isEdit.value) {
		getDetail(route.params.id);
	}
});
</script>

<style scoped>
.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.demo-form {
	max-width: 600px;
	margin: 0 auto;
}
</style>
